<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/jPicker-1.1.6.min.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title></title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" href="css/main.css">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <meta name="renderer" content="webkit">
    <link rel="shortcut icon" href="">
</head>
<body>


<section id="uicut-app">
    <section class="g-mainBox">
        <section class="g-sideMenu scroll">
            <div class="title">基本组件</div>
            <ul class="list">
                <li><a href=""><img src="images/uc-icon-sidemenu1-1.png" alt="">轮播图</a></li>
                <li><a href=""><img src="images/uc-icon-sidemenu1-2.png" alt="">广告位</a></li>
                <li><a href=""><img src="images/uc-icon-sidemenu1-3.png" alt="">宫格导航</a></li>
                <li><a href=""><img src="images/uc-icon-sidemenu1-4.png" alt="">标题</a></li>
                <li><a href=""><img src="images/uc-icon-sidemenu1-5.png" alt="">图文集</a></li>
                <li><a href=""><img src="images/uc-icon-sidemenu1-6.png" alt="">图片列表</a></li>
                <li><a href=""><img src="images/uc-icon-sidemenu1-7.png" alt="">三方图</a></li>
                <li><a href=""><img src="images/uc-icon-sidemenu1-8.png" alt="">四方图</a></li>
                <li></li>
            </ul>
            <div class="title">辅助组件</div>
            <ul class="list">
                <li><a href=""><img src="images/uc-icon-sidemenu2-1.png" alt="">视频</a></li>
                <li><a href=""><img src="images/uc-icon-sidemenu2-2.png" alt="">音频</a></li>
                <li><a href=""><img src="images/uc-icon-sidemenu2-3.png" alt="">富文本</a></li>
                <li><a href=""><img src="images/uc-icon-sidemenu2-4.png" alt="">辅助空白</a></li>
                <li><a href=""><img src="images/uc-icon-sidemenu2-5.png" alt="">分割线</a></li>
                <li><a href=""><img src="images/uc-icon-sidemenu2-6.png" alt="">悬浮图标</a></li>
                <li><a href=""><img src="images/uc-icon-sidemenu2-7.png" alt="">按钮</a></li>
                <li><a href=""><img src="images/uc-icon-sidemenu2-8.png" alt="">表单</a></li>
                <li><a href=""><img src="images/uc-icon-sidemenu2-9.png" alt="">客服</a></li>
                <li><a href=""><img src="images/uc-icon-sidemenu2-10.png" alt="">公告</a></li>
                <li><a href=""><img src="images/uc-icon-sidemenu2-11.png" alt="">流量主</a></li>
                <li></li>
            </ul>
            <div class="title">商城组件</div>
            <ul class="list">
                <li><a href=""><img src="images/uc-icon-sidemenu3-1.png" alt="">商品集</a></li>
                <li><a href=""><img src="images/uc-icon-sidemenu3-2.png" alt="">产品集</a></li>
                <li><a href=""><img src="images/uc-icon-sidemenu3-3.png" alt="">搜索框</a></li>
            </ul>
        </section>
        <section class="g-centerBox scroll">
            <div class="operate">
                <a href="" class="btn">添加到模板库</a>
                <a href="" class="btn">保存修改页面</a>
                <a href="" class="btn">模板导入</a>
            </div>
            <div class="view-box">
                <div class="content-box scroll">
                    <div class="view-banner uc-edit">
                        <a href="" class="g-viewBoxClose">x</a>
                        <img src="images/uc-banner.jpg" alt="">
                        <div class="dot-box">
                            <i class="dot dot-on" style="background-color: red;"></i>
                            <i class="dot" style="background-color: #fff;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="g-rightParam scroll">
            <!-- 轮播图 -->
            <div class="setting-banner">
                <div class="title">轮播图</div>
                <div class="title2">选择颜色</div>
                <div class="color-choose-box">
                    <div class="item"><em class="tt">焦点</em> <span id="colorChoose1"></span></div>
                    <div class="item"><em class="tt">背景</em> <span id="colorChoose2"></span></div>
                </div>
                <div class="title2">显示焦点</div>
                <div class="radio-box">
                    <label for="" class="uc-radio on">显示</label><label for="" class="uc-radio">不显示</label>
                </div>
                <div class="title2">轮播图高度</div>
                <div class="g-range">
                    <input type="range" min="0" max="200" value="30" step="1" class="js_ration">
                    <!-- <span class="ration-value">30%</span> -->
                </div>
                <div class="upload-img-box">
                    <div class="item">
                        <h4><i class="red">*</i>建议尺寸750x360 <a href="" class="btn-close"></a></h4>
                        <div class="btn-upload">
                            <!-- <img src="images/uc-banner.jpg" alt=""> -->
                            <input type="file" name="" id="">
                        </div>
                        <div class="btm">
                            <span class="tt">链接: </span><input type="text">
                        </div>
                    </div>
                    <a href="" class="btn-add">+添加</a>
                </div>

            </div>
        </section>
    </section>
</section>

<script src="js/jquery.min.js"></script>
<script src="js/jquery.nicescroll3.7.6.min.js"></script>
<script src="js/jpicker-1.1.6.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/main.js"></script>
<script>
    $(function(){
        // $("#uicut-app").height("600px")
        $("#uicut-app").height($(window).height())
    })
    $(window).resize(function(event) {
        // $("#uicut-app").height("600px")
        $("#uicut-app").height($(window).height())
    });
</script>
<script>
    $(function(){
        $("body").on('change', '.js_ration', function(event) {
            event.preventDefault();
            var val=$(this).val();
            $(this).siblings('.ration-value').text(val+'%');
            $(".uc-edit").height($(this).width()*val/100)
        });



        $.fn.jPicker.defaults.images.clientPath='images/';
        $('#colorChoose1').jPicker({window:{expandable:true,title:'请选择颜色'}},
            function(color, context){
                var hex = color.val('hex');
                $(".dot-on").css({backgroundColor: hex && '#' + hex || 'transparent'});
            }
        );
        $('#colorChoose2').jPicker({window:{expandable:true,title:'请选择颜色'}},
            function(color, context){
                var hex = color.val('hex');
                $(".dot").eq(1).css({backgroundColor: hex && '#' + hex || 'transparent'});
            }
        );



        $("body").on('click', '.uc-radio', function(event) {
            event.preventDefault();
            $(this).addClass('on').siblings().removeClass('on')


            if ($(this).index()==0) {
                $(".dot-box").css("display","b");
            }else{
                $(".dot-box").css("display","none");
            }
        });
    });
</script>
</body>
</html>